<template>
  <div style="display: flex;flex-direction: column;gap: 20px">
<!--    <div style="display: flex;justify-content: center">-->
<!--      <t-button theme="primary" type="submit">提交</t-button>-->
<!--    </div>-->
    <div class="btn-group-inline">
      <t-button  @click="dialog.objId = 0;dialog.header='添加承担项目';dialog.open=true"  variant="outline" theme="primary">
        <t-icon name="add" slot="icon"/>
        添加
      </t-button>
      <t-button  @click="editData"  variant="outline" theme="primary">
        <t-icon name="edit-1" slot="icon"/>
        修改
      </t-button>
      <t-button  @click="delData"  variant="outline" theme="primary">
        <t-icon name="delete" slot="icon"/>
        删除
      </t-button>
    </div>
  <t-table
    rowKey="id"
    :data="data"
    :columns="columns"
    bordered
    hover
    :loading="dataLoading"
    :selected-row-keys="selectedRowKeys"
    @select-change="rehandleSelectChange"
  >
    <template #expertProjectLevel="{row}">
      {{ row.expertProjectLevel | filterByDict(dict.type.expert_project_level) }}
    </template>
<!--    <template #expertProjectLevel="{row}">-->
<!--      {{ row.expertProjectLevel | filterByDict(dict.type.expert_project_level) }}-->
<!--    </template>-->
  </t-table>
    <add-edit-project @reload="getList()" :header="dialog.header" :expertId="objId"  :objId="dialog.objId" :visible.sync="dialog.open" v-if="dialog.open"></add-edit-project>
  </div>
</template>

<script>
import AddEditProject from "./components/add-edit-expert-project.vue"

export default {
  name: "expert-project",
  dicts: ['expert_project_level','join_patter','expert_project_stauts'],
  components:{
    AddEditProject
  },
  props:['objId'],
  data(){
    return {
      selectedRowKeys:[],
      dataLoading: false,
      data:[],
      columns:[
        {
          colKey: 'row-select',
          type: 'single',
          title: "选择",
          width: 64
        },
        // {
        //   colKey: "id",
        //   title: "序号",
        //   align: "center",
        //   width: 90
        // },
        {
          colKey: "projectCode",
          title: "项目编号",
          align: "center",
        },
        {
          colKey: "projectName",
          title: "项目名称",
          align: "center",
        },
        {
          colKey: "expertProjectLevel",
          title: "项目级别",
          align: "center",
        },
        {
          colKey: "ranking",
          title: "本人排名",
          align: "center",
        },
        {
          colKey: "subsidizeType",
          title: "资助类别",
          align: "center",
        },
        {
          colKey: "expenditure",
          title: "项目经费(万元)",
          align: "center",
        },
        {
          colKey: "startDate",
          title: "开始日期",
          align: "center",
        },
        {
          colKey: "endDate",
          title: "结束日期",
          align: "center",
        }
      ],
      dialog:{
        open:false,
        objId: 0,
        header: "",
      }
    }
  },
  watch: {
    objId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getList();
        }
      }
    }
  },
  methods:{
    getList(){
      this.dataLoading = true;
      this.$api.zjk.expert.projectListByExpertId(this.objId).then(response => {
        this.dataLoading = false;
        this.data = response.data;
      }).catch((e) => {
        this.dataLoading = false;
        this.$message.error(e.toString());
      })
    },
    rehandleSelectChange(val){
      this.selectedRowKeys = val;
    },
    delData(){
      if (this.selectedRowKeys.length<=0){
        this.$message.warning("请选择一行");
        return;
      }
      const obj =  this.data.find((val)=>val.id===this.selectedRowKeys[0])
      const confirmDia = this.$dialog.confirm({
        header:"系统提示",
        body:`是否确认删除项目编号为"${obj.id}"的数据项？`,
        theme: "warning",
        onConfirm: ({ e }) => {
          confirmDia.update({
            confirmBtn: {
              loading: true,
            },
          })
          this.$api.zjk.expert.projectDel(obj.id).then(
            (res) => {
              this.getList();
              this.$message.success("删除成功");
              // 请求成功后，销毁弹框
              confirmDia.destroy();
            }
          ).catch((e) => {
            confirmDia.update({
              confirmBtn: {
                loading: false,
              },
            })
            this.$message.error(e.toString());
          });
        },
      })
    },
    editData(){
      if (this.selectedRowKeys.length<=0){
        this.$message.warning("请选择一行");
        return;
      }
      const obj =  this.data.find((val)=>val.id===this.selectedRowKeys[0])
      this.dialog.header = '修改承担项目';
      this.dialog.objId = obj.id;
      this.dialog.open = true;
    }
  }
}
</script>

<style scoped>

</style>
